<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="80px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="temp.type">
                    <el-radio v-for="(type, index) in typeList" :key="index" :label="index">{{ type }}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item :label="typeList[temp.type] + '名称'" prop="name">
                <el-input v-model="temp.name" :placeholder="typeList[temp.type] + '名称'" />
            </el-form-item>

            <el-form-item label="上级菜单" prop="parentName">
                <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
                    <el-tree ref="menuListTree" :data="menuList" :props="menuListTreeProps" node-key="menuId" :default-expand-all="false"
                        :highlight-current="true" :expand-on-click-node="false" @current-change="menuListTreeCurrentChangeHandle" />
                </el-popover>
                <el-input v-model="temp.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单"
                    class="menu-list__input" />
            </el-form-item>

            <el-form-item v-if="temp.type !== 2" label="菜单路由" prop="url">
                <el-input v-model="temp.url" placeholder="菜单路由" />
            </el-form-item>

            <el-form-item v-if="temp.type != 0" label="授权标识" prop="perms">
                <el-input v-model="temp.perms" placeholder="多个用逗号分隔, 如: user:list,user:create" />
            </el-form-item>

            <el-form-item v-if="temp.type !== 2" label="排序号" prop="orderNum">
                <el-input-number v-model="temp.orderNum" width="100%" controls-position="right" :min="0" label="排序号" />
            </el-form-item>

            <el-form-item v-if="temp.type !== 2" label="菜单图标" prop="icon">
                <el-row>
                    <el-col :span="22">
                        <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
                            <div class="mod-menu__icon-inner">
                                <div class="mod-menu__icon-list">
                                    <el-button v-for="(item, index) in iconList" :key="index" :class="{ 'is-active': item === temp.icon }"
                                        @click="iconActiveHandle(item)">
                                        <svg-icon :icon-class="item" class-name="disabled" />
                                    </el-button>
                                </div>
                            </div>
                        </el-popover>
                        <el-input v-model="temp.icon" v-popover:iconListPopover placeholder="菜单图标名称" class="icon-list__input" />
                    </el-col>
                    <el-col :span="2" class="icon-list__tips">
                        <el-tooltip placement="top" effect="light">
                            <div slot="content">图标库:<a href="https://fa5.dashgame.com/#/%E5%9B%BE%E6%A0%87"
                                    target="_blank">https://fa5.dashgame.com/#/%E5%9B%BE%E6%A0%87"</a></div>
                            <i class="el-icon-warning" />
                        </el-tooltip>
                    </el-col>
                </el-row>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { treeDataTranslate } from '@/utils'
import { svgIcons } from '@/icons'
import { getMenuInfo, parentMenuList, createMenuList, updateMenuList } from '@/api/permission'
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '编辑'
            }
            return textMap[type]
        }
    },
    data () {
        var validateUrl = (rule, value, callback) => {
            if (this.temp.type === 1 && !/\S/.test(value)) {
                callback(new Error('菜单URL不能为空'))
            } else {
                callback()
            }
        }
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            typeList: ['目录', '菜单', '按钮'], // 菜单陆行
            iconList: svgIcons, // 所有图标
            temp: {
                menuId: '',
                type: 1,
                name: '',
                parentId: 0,
                parentName: '',
                url: '',
                perms: '',
                orderNum: 0,
                icon: ''
            },
            rule: {
                name: [
                    { required: true, message: '菜单名称不能为空', trigger: 'blur' }
                ],
                parentName: [
                    { required: true, message: '上级菜单不能为空', trigger: 'change' }
                ],
                // url: [
                //     { validator: validateUrl, trigger: 'blur' }
                // ],
                url: [
                    { required: true, message: '路由不能为空', trigger: 'change' }
                ]
            },
            menuList: [],
            menuListTreeProps: {
                label: 'name',
                children: 'children'
            }
        }
    },
    created () {

    },
    methods: {
        // 初始化
        init (status, param) {
            this.getParentMenuList()
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            // let data = Object.assign({}, param)  .//从上一页带过来当前的数据
            const { data, code } = await getMenuInfo(param.menuId) // 从后台获取当前的的数据
            // 成功
            this.temp.menuId = data.menuId
            this.temp.type = data.type
            this.temp.name = data.name
            this.temp.parentId = data.parentId
            // this.temp.parentName = data.parentName
            this.temp.url = data.url
            this.temp.perms = data.perms
            this.temp.orderNum = data.orderNum
            this.temp.icon = data.icon
            this.$refs.menuListTree.setCurrentKey(this.temp.parentId) // 设置 上级菜单中的 树形 当前是哪一个
            this.temp.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 后太不会返回parentName 要根据 parent id去找
        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                type: 1,
                name: '',
                parentId: 0,
                parentName: '',
                url: '',
                perms: '',
                orderNum: 0,
                icon: ''
            }
        },
        // 获取所有菜单
        async getParentMenuList () {
            const { data } = await parentMenuList()
            this.$nextTick(() => {
                this.menuList = treeDataTranslate(data, 'menuId')
            })
        },
        // 上级菜单树选中
        menuListTreeCurrentChangeHandle (data) {
            this.temp.parentId = data.menuId
            this.temp.parentName = data.name
        },
        // 图标选中
        iconActiveHandle (iconName) {
            this.temp.icon = iconName
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                const params = {
                    'menuId': this.temp.menuId || undefined,
                    'type': this.temp.type,
                    'name': this.temp.name,
                    'parentId': this.temp.parentId,
                    'url': this.temp.url,
                    'perms': this.temp.perms,
                    'orderNum': this.temp.orderNum,
                    'icon': this.temp.icon
                }
                const textMap = {
                    create: createMenuList, // 新增
                    update: updateMenuList // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        }

    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
